// Configuration
let config = {
    apiKey: localStorage.getItem('deepseek_api_key') || '',
    simulationMode: localStorage.getItem('simulation_mode') === 'true'
};

// Mock data for SVG icons
const mockSvgIcons = [
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </svg>`,
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M12 3l8 6v12h-5v-7H9v7H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
    </svg>`,
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M12 5.69l5 4.5V18h-5v-7H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
    </svg>`
];

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {

    
    // Input and button elements
    const statusBar = document.getElementById('status-bar');
    const apiKeyInput = document.getElementById('api-key');
    const saveSettingsBtn = document.getElementById('save-settings');
    const cancelSettingsBtn = document.getElementById('cancel-settings');
    const settingsBtn = document.getElementById('settings-btn');
    const settingsDialog = document.getElementById('settings-dialog');
    const simulationModeCheckbox = document.getElementById('simulation-mode');
    
    // 对话模式元素
    const chatContainer = document.getElementById('chat-container');
    const chatPromptInput = document.getElementById('chat-prompt');
    const chatQuantityInput = document.getElementById('chat-quantity');
    const sendChatBtn = document.getElementById('send-chat-btn');
    const refreshChatBtn = document.getElementById('refresh-chat-btn');
    const styleToggle = document.getElementById('style-toggle');
    const styleSelector = document.getElementById('style-selector');
    const chatStyleSelect = document.getElementById('chat-style');

    // Settings dialog elements
    // apiKeyInput, saveSettingsBtn, cancelSettingsBtn, settingsBtn, settingsDialog, simulationModeCheckbox
    // 已经在前面声明

    // Load current settings
    apiKeyInput.value = config.apiKey;
    simulationModeCheckbox.checked = config.simulationMode;

    // Settings dialog handlers
    console.log('设置按钮和对话框元素:', settingsBtn, settingsDialog);
    settingsBtn.addEventListener('click', (e) => {
        console.log('设置按钮已点击');
        e.stopPropagation();
        settingsDialog.style.display = 'flex';
        console.log('对话框显示设置为flex');
    });

    saveSettingsBtn.addEventListener('click', () => {
        config.apiKey = apiKeyInput.value.trim();
        config.simulationMode = simulationModeCheckbox.checked;
        
        // Save to localStorage
        localStorage.setItem('deepseek_api_key', config.apiKey);
        localStorage.setItem('simulation_mode', config.simulationMode);
        
        settingsDialog.style.display = 'none';
        updateStatus('设置已保存');
    });

    cancelSettingsBtn.addEventListener('click', () => {
        settingsDialog.style.display = 'none';
    });

    // Close dialog when clicking outside
    settingsDialog.addEventListener('click', (e) => {
        if (e.target === settingsDialog) {
            settingsDialog.style.display = 'none';
        }
    });
    

    
    // 对话模式发送消息
    sendChatBtn.addEventListener('click', function() {
        const prompt = chatPromptInput.value.trim();
        const quantity = parseInt(chatQuantityInput.value);

        if (!prompt) {
            alert('请输入SVG图标的描述。');
            return;
        }
        
        // 隐藏"换一批"按钮
        refreshChatBtn.style.display = 'none';
        
        // 检查是否使用风格
        let finalPrompt = prompt;
        if (styleToggle.checked) {
            const selectedStyle = chatStyleSelect.value;
            finalPrompt = `${prompt}，风格：${selectedStyle}`;
        }

        // 添加用户消息到对话
        addChatMessage('user', finalPrompt);
        
        // 禁用发送按钮
        this.disabled = true;
        this.textContent = '发送中...';
        
        // 清空输入框
        chatPromptInput.value = '';
        
        // 生成SVG图标
        generateSvgIcons(finalPrompt, quantity, function() {
            // 重新启用发送按钮
            sendChatBtn.disabled = false;
            sendChatBtn.textContent = '发送';
        });
    });
    
    // 支持回车键发送消息
    chatPromptInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendChatBtn.click();
        }
    });
    
    // 风格开关事件监听器
    styleToggle.addEventListener('change', function() {
        if (this.checked) {
            styleSelector.style.display = 'block';
        } else {
            styleSelector.style.display = 'none';
        }
    });
    
    // "换一批"按钮事件监听器
    refreshChatBtn.addEventListener('click', function() {
        const quantity = parseInt(chatQuantityInput.value);
        
        // 禁用按钮防止重复点击
        this.disabled = true;
        this.textContent = '获取中...';
        
        // 调用refreshSvgIcons函数获取新的SVG图标
        refreshSvgIcons(quantity, function() {
            // 重新启用按钮
            refreshChatBtn.disabled = false;
            refreshChatBtn.textContent = '换一批';
        });
    });
    

    
    // Function to refresh SVG icons
    function refreshSvgIcons(quantity, callback) {
        statusBar.textContent = '正在获取新的SVG图标...';

        if (config.simulationMode) {
            // Simulate generation with mock data
            console.log('将要发送到服务器的模拟消息:');
            console.log([
                {
                    role: 'system',
                    content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
                },
                {
                    role: 'user',
                    content: '换一批'
                }
            ]);

            setTimeout(() => {
                const results = [];
                for (let i = 0; i < quantity; i++) {
                    const randomIndex = Math.floor(Math.random() * mockSvgIcons.length);
                    results.push(mockSvgIcons[randomIndex]);
                }
                displayResults(results);
                statusBar.textContent = '换一批完成（模拟模式）!';
                
                // 执行回调函数（如果有）
                if (callback && typeof callback === 'function') {
                    callback();
                }
            }, 1000);
        } else if (!config.apiKey) {
            // Show error if API key is missing and simulation mode is off
            statusBar.textContent = '错误: 需要API密钥';
            alert('生成SVG图标需要API密钥。请在设置中配置您的API密钥。');
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        } else {
            // Call DeepSeek API
            const requestBody = JSON.stringify({
                model: 'deepseek-chat',
                messages: [
                    {
                        role: 'system',
                        content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
                    },
                    {
                        role: 'user',
                        content: '换一批'
                    }
                ],
                temperature: 0.7,
                max_tokens: 4000
            });

            // Log the final message being sent
            console.log('Final message sent to server:');
            console.log(JSON.parse(requestBody).messages);

            fetch('https://api.deepseek.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${config.apiKey}`
                },
                body: requestBody
            })
            .then(response => response.json())
            .then(data => {
                const svgContent = data.choices[0].message.content;
                const svgPattern = /<svg[^>]*>.*?<\/svg>/gs;
                const svgs = svgContent.match(svgPattern) || [];
                
                displayResults(svgs);
                statusBar.textContent = '换一批完成!';
                
                // 执行回调函数（如果有）
                if (callback && typeof callback === 'function') {
                    callback();
                }
            })
            .catch(error => {
                console.error('错误:', error);
                statusBar.textContent = '获取新SVG图标出错';
                alert('获取新SVG图标失败。请检查您的API密钥并重试。');
                
                // 执行回调函数（如果有）
                if (callback && typeof callback === 'function') {
                    callback();
                }
            });
        }
    }
    
    // Function to generate SVG icons
    function generateSvgIcons(prompt, quantity, callback) {
        statusBar.textContent = '正在生成SVG图标...';

        if (config.simulationMode) {
            // Simulate generation with mock data
            // 记录将要发送到服务器的模拟消息
            console.log('将要发送到服务器的模拟消息:');
            console.log([
                {
                    role: 'system',
                    content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
                },
                {
                    role: 'user',
                    content: `我想要生成${quantity}个SVG图标，描述如下：${prompt}`
                }
            ]);

            setTimeout(() => {
                const results = [];
                for (let i = 0; i < quantity; i++) {
                    const randomIndex = Math.floor(Math.random() * mockSvgIcons.length);
                    results.push(mockSvgIcons[randomIndex]);
                }
                displayResults(results);
                statusBar.textContent = '生成完成（模拟模式）!';
                
                // 执行回调函数（如果有）
                if (callback && typeof callback === 'function') {
                    callback();
                }
            }, 1000);
        } else if (!config.apiKey) {
            // Show error if API key is missing and simulation mode is off
            statusBar.textContent = '错误: 需要API密钥';
            alert('生成SVG图标需要API密钥。请在设置中配置您的API密钥。');
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        } else {
            // Call DeepSeek API
            const requestBody = JSON.stringify({
                model: 'deepseek-chat',
                messages: [
                    {
                        role: 'system',
                        content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
                    },
                    {
                        role: 'user',
                        content: `我想要生成${quantity}个SVG图标，描述如下：${prompt}`
                    }
                ],
                temperature: 0.7,
                max_tokens: 4000
            });

            // Log the final message being sent
            console.log('Final message sent to server:');
            console.log(JSON.parse(requestBody).messages);

            fetch('https://api.deepseek.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${config.apiKey}`
                },
                body: requestBody
            })
            .then(response => response.json())
            .then(data => {
                const svgContent = data.choices[0].message.content;
                const svgPattern = /<svg[^>]*>.*?<\/svg>/gs;
                const svgs = svgContent.match(svgPattern) || [];
                
                displayResults(svgs);
                statusBar.textContent = '生成完成!';
                
                // 执行回调函数（如果有）
                if (callback && typeof callback === 'function') {
                    callback();
                }
            })
            .catch(error => {
                console.error('错误:', error);
                statusBar.textContent = '生成SVG图标出错';
                alert('生成SVG图标失败。请检查您的API密钥并重试。');
                
                // 执行回调函数（如果有）
                if (callback && typeof callback === 'function') {
                    callback();
                }
            });
        }
    }

    // Display generated SVG icons
function displayResults(svgs) {
    // 在对话模式中显示SVG图标结果
    if (svgs.length > 0) {
        addSystemMessage(`已生成 ${svgs.length} 个SVG图标：`);
        
        // 显示"换一批"按钮
        refreshChatBtn.style.display = 'block';
        
        // 创建SVG预览容器
        const previewContainer = document.createElement('div');
        previewContainer.style.marginTop = '10px';
        previewContainer.style.display = 'grid';
        previewContainer.style.gridTemplateColumns = 'repeat(auto-fit, minmax(80px, 1fr))';
        previewContainer.style.gap = '10px';
        previewContainer.style.padding = '10px';
        previewContainer.style.backgroundColor = '#f8f9fa';
        previewContainer.style.borderRadius = '8px';
        previewContainer.style.border = '1px solid #e9ecef';

        svgs.forEach((svg, index) => {
            const svgItem = document.createElement('div');
            svgItem.style.display = 'flex';
            svgItem.style.flexDirection = 'column';
            svgItem.style.alignItems = 'center';
            svgItem.style.gap = '5px';
            svgItem.style.padding = '8px';
            svgItem.style.backgroundColor = 'white';
            svgItem.style.borderRadius = '6px';
            svgItem.style.border = '1px solid #dee2e6';
            svgItem.style.cursor = 'pointer';
            svgItem.style.transition = 'transform 0.2s';
            
            svgItem.addEventListener('mouseenter', () => {
                svgItem.style.transform = 'scale(1.05)';
            });
            
            svgItem.addEventListener('mouseleave', () => {
                svgItem.style.transform = 'scale(1)';
            });
            
            svgItem.addEventListener('click', () => {
                saveSvg(svg, index);
            });

            // Create SVG container
            const svgContainer = document.createElement('div');
            svgContainer.innerHTML = svg;
            svgContainer.style.width = '48px';
            svgContainer.style.height = '48px';
            svgContainer.style.display = 'flex';
            svgContainer.style.alignItems = 'center';
            svgContainer.style.justifyContent = 'center';
            
            // 设置SVG尺寸
            const svgElement = svgContainer.querySelector('svg');
            if (svgElement) {
                svgElement.setAttribute('width', '32');
                svgElement.setAttribute('height', '32');
            }

            // Create index label
            const indexLabel = document.createElement('div');
            indexLabel.textContent = `#${index + 1}`;
            indexLabel.style.fontSize = '12px';
            indexLabel.style.color = '#6c757d';
            indexLabel.style.fontWeight = 'bold';

            svgItem.appendChild(svgContainer);
            svgItem.appendChild(indexLabel);
            previewContainer.appendChild(svgItem);
        });

        // 添加到最后一个系统消息中
        const lastSystemMessage = chatContainer.querySelector('.chat-message.system:last-child .message-content');
        if (lastSystemMessage) {
            lastSystemMessage.appendChild(previewContainer);
        }
        
        // 滚动到底部
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
}

// Save SVG to file
function saveSvg(svg, index) {
    showFormatDialog(svg, index);
}

// Function to update status bar
function updateStatus(message) {
    const statusBar = document.getElementById('status-bar');
    statusBar.textContent = message;
    
    // Optional: Highlight the status message temporarily
    statusBar.style.backgroundColor = '#e8f5e9';
    setTimeout(() => {
        statusBar.style.backgroundColor = '';
    }, 2000);
}

// 添加聊天消息到对话容器
function addChatMessage(role, content) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `chat-message ${role}`;
    
    const avatarDiv = document.createElement('div');
    avatarDiv.className = 'message-avatar';
    avatarDiv.textContent = role === 'user' ? '👤' : '🤖';
    
    const contentDiv = document.createElement('div');
    contentDiv.className = 'message-content';
    
    const paragraph = document.createElement('p');
    paragraph.textContent = content;
    contentDiv.appendChild(paragraph);
    
    messageDiv.appendChild(avatarDiv);
    messageDiv.appendChild(contentDiv);
    
    chatContainer.appendChild(messageDiv);
    
    // 滚动到底部
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

// 添加系统消息（用于显示API响应）
function addSystemMessage(content) {
    addChatMessage('system', content);
}

// 修改generateSvgIcons函数以添加系统消息
function generateSvgIcons(prompt, quantity, callback) {
    // 添加系统消息显示正在生成
    addSystemMessage(`正在为您生成 ${quantity} 个SVG图标...`);
    
    statusBar.textContent = '正在生成SVG图标...';

    if (config.simulationMode) {
        // Simulate generation with mock data
        // 记录将要发送到服务器的模拟消息
        console.log('将要发送到服务器的模拟消息:');
        console.log([
            {
                role: 'system',
                content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
            },
            {
                role: 'user',
                content: `我想要生成${quantity}个SVG图标，描述如下：${prompt}`
            }
        ]);

        setTimeout(() => {
            const results = [];
            for (let i = 0; i < quantity; i++) {
                const randomIndex = Math.floor(Math.random() * mockSvgIcons.length);
                results.push(mockSvgIcons[randomIndex]);
            }
            displayResults(results);
            statusBar.textContent = '生成完成（模拟模式）!';
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        }, 1000);
    } else if (!config.apiKey) {
        // Show error if API key is missing and simulation mode is off
        statusBar.textContent = '错误: 需要API密钥';
        // 添加系统错误消息
        addSystemMessage('错误: 需要配置API密钥才能生成SVG图标');
        alert('生成SVG图标需要API密钥。请在设置中配置您的API密钥。');
        
        // 执行回调函数（如果有）
        if (callback && typeof callback === 'function') {
            callback();
        }
    } else {
        // Call DeepSeek API
        const requestBody = JSON.stringify({
            model: 'deepseek-chat',
            messages: [
                {
                    role: 'system',
                    content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
                },
                {
                    role: 'user',
                    content: `我想要生成${quantity}个SVG图标，描述如下：${prompt}`
                }
            ],
            temperature: 0.7,
            max_tokens: 4000
        });

        // Log the final message being sent
        console.log('Final message sent to server:');
        console.log(JSON.parse(requestBody).messages);

        fetch('https://api.deepseek.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${config.apiKey}`
            },
            body: requestBody
        })
        .then(response => response.json())
        .then(data => {
            const svgContent = data.choices[0].message.content;
            const svgPattern = /<svg[^>]*>.*?<\/svg>/gs;
            const svgs = svgContent.match(svgPattern) || [];
            
            displayResults(svgs);
            statusBar.textContent = '生成完成!';
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        })
        .catch(error => {
            console.error('错误:', error);
            statusBar.textContent = '生成SVG图标出错';
            // 添加系统错误消息
            addSystemMessage('生成SVG图标失败，请检查API密钥和网络连接');
            alert('生成SVG图标失败。请检查您的API密钥并重试。');
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        });
    }
}

// 修改refreshSvgIcons函数以添加系统消息
function refreshSvgIcons(quantity, callback) {
    statusBar.textContent = '正在获取新的SVG图标...';
    // 添加系统消息显示正在刷新
    addSystemMessage('正在为您获取新的一批SVG图标...');

    if (config.simulationMode) {
        // Simulate generation with mock data
        console.log('将要发送到服务器的模拟消息:');
        console.log([
            {
                role: 'system',
                content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
            },
            {
                role: 'user',
                content: '换一批'
            }
        ]);

        setTimeout(() => {
            const results = [];
            for (let i = 0; i < quantity; i++) {
                const randomIndex = Math.floor(Math.random() * mockSvgIcons.length);
                results.push(mockSvgIcons[randomIndex]);
            }
            displayResults(results);
            statusBar.textContent = '换一批完成（模拟模式）!';
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        }, 1000);
    } else if (!config.apiKey) {
        // Show error if API key is missing and simulation mode is off
        statusBar.textContent = '错误: 需要API密钥';
        // 添加系统错误消息
        addSystemMessage('错误: 需要配置API密钥才能获取新的SVG图标');
        alert('生成SVG图标需要API密钥。请在设置中配置您的API密钥。');
        
        // 执行回调函数（如果有）
        if (callback && typeof callback === 'function') {
            callback();
        }
    } else {
        // Call DeepSeek API
        const requestBody = JSON.stringify({
            model: 'deepseek-chat',
            messages: [
                {
                    role: 'system',
                    content: '您是专业的SVG图标设计师。根据用户描述生成SVG代码。只返回SVG代码，不要添加任何解释文本。每个SVG图标都应包含在完整的<svg>标签中。'
                },
                {
                    role: 'user',
                    content: '换一批'
                }
            ],
            temperature: 0.7,
            max_tokens: 4000
        });

        // Log the final message being sent
        console.log('Final message sent to server:');
        console.log(JSON.parse(requestBody).messages);

        fetch('https://api.deepseek.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${config.apiKey}`
            },
            body: requestBody
        })
        .then(response => response.json())
        .then(data => {
            const svgContent = data.choices[0].message.content;
            const svgPattern = /<svg[^>]*>.*?<\/svg>/gs;
            const svgs = svgContent.match(svgPattern) || [];
            
            displayResults(svgs);
            statusBar.textContent = '换一批完成!';
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        })
        .catch(error => {
            console.error('错误:', error);
            statusBar.textContent = '获取新SVG图标出错';
            // 添加系统错误消息
            addSystemMessage('获取新的SVG图标失败，请检查API密钥和网络连接');
            alert('获取新SVG图标失败。请检查您的API密钥并重试。');
            
            // 执行回调函数（如果有）
            if (callback && typeof callback === 'function') {
                callback();
            }
        });
    }
}

// 显示格式选择对话框
function showFormatDialog(svg, index) {
    const overlay = document.createElement('div');
    overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:1000;';
    
    const dialog = document.createElement('div');
    dialog.className = 'format-dialog';
    dialog.innerHTML = `
        <h3>选择保存格式</h3>
        <div style="display:flex;gap:20px;justify-content:center;">
            <button class="format-btn" data-format="svg">
                <div>🖼️</div>
                <div>SVG</div>
            </button>
            <button class="format-btn" data-format="png">
                <div>🖼️</div>
                <div>PNG</div>
            </button>
        </div>
        <div style="margin-top:20px;text-align:center;">
            <label style="display:block;margin-bottom:10px;color:#333;">选择颜色（可选）:</label>
            <input type="color" id="color-picker" value="#000000" style="width:60px;height:60px;border-radius:50%;border:2px solid #ddd;">
        </div>
        <div style="text-align:center;margin-top:20px;">
            <button id="cancel-format">取消</button>
        </div>
    `;
    
    overlay.appendChild(dialog);
    document.body.appendChild(overlay);

    // 添加事件监听器
    dialog.querySelectorAll('.format-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const format = e.currentTarget.dataset.format;
            const color = dialog.querySelector('#color-picker').value;
            overlay.remove();
            
            if (format === 'svg') {
                saveAsSvg(svg, index, color);
            } else if (format === 'png') {
                saveAsPng(svg, index, color);
            }
        });
    });

    dialog.querySelector('#cancel-format').addEventListener('click', () => {
        overlay.remove();
    });
}

// 保存为SVG
function saveAsSvg(svg, index, color = null) {
    let processedSvg = svg;
    
    // 如果指定了颜色，修改SVG的颜色
    if (color && color !== '#000000') {
        const parser = new DOMParser();
        const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
        const svgElement = svgDoc.documentElement;
        
        // 修改所有路径和形状的填充色和描边色
        const elementsToColor = svgElement.querySelectorAll('path, circle, rect, ellipse, polygon, line, polyline');
        elementsToColor.forEach(element => {
            if (element.hasAttribute('fill') && element.getAttribute('fill') !== 'none') {
                element.setAttribute('fill', color);
            }
            if (element.hasAttribute('stroke') && element.getAttribute('stroke') !== 'none') {
                element.setAttribute('stroke', color);
            }
        });
        
        processedSvg = new XMLSerializer().serializeToString(svgDoc);
    }

    const blob = new Blob([processedSvg], {type: 'image/svg+xml'});
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = `svg-icon-${index + 1}.svg`;
    document.body.appendChild(a);
    a.click();

    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    updateStatus('SVG图标已保存' + (color ? `（已应用颜色: ${color}）` : ''));
}

// 保存为PNG
function saveAsPng(svg, index, color = null) {
    const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
    const svgUrl = URL.createObjectURL(svgBlob);
    
    const img = new Image();
    img.onload = function() {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        
        const ctx = canvas.getContext('2d');
        
        // 先绘制原始图像
        ctx.drawImage(img, 0, 0);
        
        // 如果指定了颜色，应用颜色滤镜
        if (color && color !== '#000000') {
            // 使用源图像作为蒙版，应用指定颜色
            ctx.globalCompositeOperation = 'source-in';
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
        
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `svg-icon-${index + 1}.png`;
            document.body.appendChild(a);
            a.click();
            
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            URL.revokeObjectURL(svgUrl);
            updateStatus('PNG图标已保存' + (color ? `（已应用颜色: ${color}）` : ''));
        }, 'image/png');
    };
    img.src = svgUrl;
}
});